<template>
    <div class="gd-body">
        <div>index.vue</div>
        <!-- 使用图片 img 元素引用时, 实际生成的路径为 webpack.config.js 中 output.publicPath + url-loader 中的 name -->
        <img src="@/assets/img/icon-avatar.jpg" />
        <!-- 使用 css 设置的背景图片时, 实际生成路径为 webapck.config.js 中 ExtractTextWebpackPlugin 的 参数 publicPath + url-loader 中的 name -->
        <div class="logo"></div>
        <div class="jquery">点击字体变大</div>
    </div>
</template>

<script>
    import $ from 'jquery';

    export default {
        name: 'index',
        data() {
            return {
                name: 'jack',
                age: 22
            };
        },
        mounted() {
            $('.jquery').click(function() {
                $(this).animate(
                    {
                        fontSize: '+=2'
                    },
                    300,
                    'linear'
                );
            });
        }
    };
</script>

<style scoped>
@import './index.less';
</style>